<template>
  <div class="groupList">
    <div class="header">
      <jc-button
        :btn-arr="['reload']"
        @refresh="getRoleList"
      />
    </div>
    <div class="table-content">
      <jc-table
        :table-data="tableData"
        :table-header="tableHeader"
        table-height="78.84vh"
        serial
      >
        <template v-slot:btnState="col">
          <el-tag
            v-for="item in col.scope.row.details"
            :key="item.fname"
            closable
            @close="closeTag(item.fid)"
            @click="interUsers(item, 2)"
          >
            {{ item.fname }}
          </el-tag>
        </template>
        <template v-slot:btnSlot="col">
          <el-button
            type="primary"
            size="mini"
            @click="interUsers(col.scope.row, 1)"
          >
            {{ $t('market.interUsers') }}<!--新增组别-->
          </el-button>
        </template>
      </jc-table>
    </div>
    <div class="footer">
      <jc-pagination
        v-show="total > 0"
        :total="total"
        :page.sync="pageNum"
        :limit.sync="size"
        @pagination="getRoleList"
      />
    </div>
    <el-dialog
      v-dialogDrag
      :title="title"
      :visible.sync="insertUSERVisible"
      :close-on-click-modal="false"
      width="500px"
      top="5vh"
    >
      <el-form ref="userForm" :model="userForm" label-width="120px" size="mini">
        <el-form-item :label="$t('market.groupname')">
          <el-input v-model="userForm.fname" />
        </el-form-item>
        <el-form-item style="height: 50px;">
          <el-button @click="insertUSERVisible = false">{{ $t('btn.cancel') }}</el-button>
          <el-button type="primary" @click="newUsers">{{ $t('btn.confirm') }}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  queryDeptWorkshopGroup,
  insertWorkshopGroup,
  delWorkshopGroup,
  updateWorkshopGroup
} from '@/api/workshop'
import jcButton from '@/components/Button'
export default {
  name: 'GroupList',
  components: {
    jcButton
  },
  data() {
    return {
      title: '',
      total: 0, // 总条目
      pageNum: 1, // 当前页
      size: 10, // 每页显示多少条数据
      tableData: [], // 列表数据
      // 表头数据
      tableHeader: [
        {
          label: this.$t('market.prodeptNum'),
          prop: 'scFnumber',
          width: '130px'
        },
        {
          label: this.$t('market.prodept'),
          prop: 'scbm',
          width: '130px'
        },
        {
          label: this.$t('market.groupname'),
          type: 'state',
          tooltip: true,
          minWidth: '100px'
        },
        { label: this.$t('market.handle'), type: 'btn', width: '150px' }
      ],
      // 行高
      insertUSERVisible: false,
      userForm: {
        fdeptId: '',
        fname: ''
      }
    }
  },
  created() {
    this.getRoleList()
  },
  methods: {
    // 组别列表
    async getRoleList() {
      const DATA = {
        pageNum: this.pageNum,
        pageSize: this.size
      }
      const { data: res } = await queryDeptWorkshopGroup(DATA)
      this.tableData = res.list
      this.total = res.total
    },
    // 打开 弹窗新增组别名称
    interUsers(ev, en) {
      this.userForm.fuserId = ''
      this.userForm.fname = ''
      if (en === 1) {
        this.userForm.fdeptId = ev.fdeptId
        this.title = this.$t('market.tranchesAdd')
      } else {
        this.title = this.$t('market.tranchesEdit')
        this.userForm.fname = ev.fname
        this.userForm.fgroupId = ev.fid
      }
      this.insertUSERVisible = true
    },
    // 添加组别
    newUsers() {
      const DATA = { ...this.userForm }
      if (this.title === this.$t('market.tranchesAdd')) {
        insertWorkshopGroup(DATA).then(res => {
          if (res.code === 0) {
            this.$message({ showClose: true, message: res.message, type: 'success' })
            this.insertUSERVisible = false
            this.getRoleList()
          } else {
            this.$confirm(res.message, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'error'
            })
          }
        })
      } else { // 修改组别名称
        this.editTag()
      }
    },
    // 修改工序库名称(组别名称)
    editTag() {
      const DATA = { ...this.userForm }
      updateWorkshopGroup(DATA).then(res => {
        if (res.code === 0) {
          this.$message({ showClose: true, message: res.message, type: 'success' })
          this.insertUSERVisible = false
          this.getRoleList()
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 删除组别名称
    closeTag(ev) {
      const DATA = { fid: ev }
      this.$confirm('此操作将删除此组别, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delWorkshopGroup(DATA).then(res => {
          if (res.code === 0) {
            this.getRoleList()
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          } else {
            this.$confirm(res.message, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'error'
            })
          }
        })
      })
    }
  }
}
</script>

<style scoped lang="scss">
.groupList {
  @include listBom;

  .header {
    position: relative;

    .header-name {
      width: 100%;
    }

    .btn {
      transform: translateY(18%);
      margin-left: 450px !important;
    }
  }

  .el-table {
    .el-tag {
      height: 23px;
      line-height: 23px;
    }
  }

  .el-tag + .el-tag {
    margin-left: 10px;
    margin-bottom: 3px;
  }
  .el-form-item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70%;
    margin-bottom: 15px;
  }
}
</style>
